<template>
  <div class="container">
    <!-- 项目详情 -->
    <div class="project-detail">
      <div class="project-logo">
        <img :src="imgUrl+order_data.image"
             v-if="imgUrl&&order_data.image"
             alt
             class="img" />
      </div>
      <div class="project-info">
        <div class="project-name">{{order_data.name}}</div>
        <div class="hos-name">{{order_data.hospitals_name}}</div>
        <div class="project-price">
          <div class="rmb">
            <div class="icon">￥</div>
            <div class="num">{{order_data.project_price}}</div>
          </div>
          <div class="coin"
               v-if="order_data.deduction_method">
            <div class="coin-item gold"
                 v-if="order_data.deduction_method==1">
              <img :src="ImgBaseUrl+'/mp_3.1.6/goldcoin/gold.png'"
                   v-if="ImgBaseUrl"
                   alt
                   class="icon" />
              <div class="tip">金币可抵{{order_data.deduction_credit}}元</div>
            </div>
            <div class="coin-item silver"
                 v-if="order_data.deduction_method==2">
              <img :src="ImgBaseUrl+'/mp_3.1.6/goldcoin/silver.png'"
                   v-if="ImgBaseUrl"
                   alt
                   class="icon" />
              <div class="tip">银币可抵{{order_data.deduction_credit}}元</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- plus -->
    <div class="plus clearfix"
         v-if="order_data.is_plus==1&&order_data.plus_title&&order_data.plus_title!=''">{{order_data.plus_title}}</div>
    <!-- 微信号和推荐人 -->
    <div class="user-info">
      <div class="info-item">
        <div class="tip">微信号</div>
        <input type="text"
               class="inp"
               placeholder="请输入微信号（选填）"
               v-model="wetchartNum" />
      </div>
      <div class="info-item">
        <div class="tip">推荐人</div>
        <input type="number"
               maxlength="11"
               class="inp"
               placeholder="请输入推荐人手机号"
               :disabled="isPhone"
               v-model="telNum" />
      </div>
    </div>

    <!-- 金银币抵扣以及优惠券 -->
    <div class="deduction">
      <div class="coins-bar"
           v-if="order_data.deduction_credit>0&&(order_data.deduction_method==1||order_data.deduction_method==2)">
        <!-- 金币 -->
        <div class="coin-item"
             v-if="order_data.deduction_credit>0&&order_data.deduction_method==1">
          <div class="top clearfix">
            <div class="title">可使用金币抵扣</div>
            <div class="controller">
              <div class="minus-btn"
                   :disabled="gold_num<=0"
                   @tap.stop="action_coin(1,'-')"></div>
              <input type="number"
                     class="num-inp"
                     v-model="gold_num"
                     placeholder="0" />
              <div class="add-btn"
                   @tap.stop="action_coin(1,'+')"></div>
            </div>
          </div>
          <div class="tips">账户剩余金币{{order_data.use_gold}}</div>
        </div>
        <!-- 银币 -->
        <div class="coin-item"
             v-if="order_data.deduction_credit>0&&order_data.deduction_method==2">
          <div class="top clearfix">
            <div class="title">可使用银币抵扣</div>
            <div class="controller">
              <div class="minus-btn"
                   :disabled="silver_num<=0"
                   @tap.stop="action_coin(2,'-')"></div>
              <input type="number"
                     class="num-inp"
                     v-model="silver_num"
                     placeholder="0" />
              <div class="add-btn"
                   @tap.stop="action_coin(2,'+')"></div>
            </div>
          </div>
          <div class="tips">账户剩余银币{{order_data.use_sliver}}</div>
        </div>
        <div class="coin-item"
             v-if="order_data.use_gold>0&&order_data.deduction_method==2">
          <div class="top clearfix">
            <div class="title">金币兑换银币</div>
            <div class="controller exchange"
                 @tap="show_coinmodel()">去兑换</div>
          </div>
        </div>
      </div>
      <div class="ticket-bar clearfix"
           @tap="toTicketDetail()">
        <div class="ticket-l">优惠券</div>
        <div class="ticket-r">
          <!-- 没有优惠券可用 -->
          <div class="ticket-empty"
               v-if="ticket_array.length ==0">无可用优惠券</div>
          <!-- 有可用优惠券 -->
          <div class="ticket"
               v-if="ticket_array.length>0&&!selcet_ticket_data.condtion_name">
            {{ticket_array.length}}张可用
            <img :src="ImgBaseUrl+'/mp_3.1.6/确认订单/地址箭头/iOS/Path 7@3x.png'"
                 v-if="ImgBaseUrl"
                 class="icon" />
          </div>
          <!-- 已选择优惠券 -->
          <div class="ticket"
               v-if="selcet_ticket_data.condtion_name">
            满{{selcet_ticket_data.type_min_money}}减{{selcet_ticket_data.type_money}}
            <img :src="ImgBaseUrl+'/mp_3.1.6/确认订单/地址箭头/iOS/Path 7@3x.png'"
                 v-if="ImgBaseUrl"
                 class="icon" />
          </div>
        </div>
      </div>
    </div>
    <!-- 订单信息 -->
    <ul class="order-info clearfix">
      <li class="info-item clearfix">
        <div class="item-l">项目价格</div>
        <div class="item-r price">
          <!-- 现金 -->
          <div class="money">￥{{order_data.project_price}}</div>
        </div>
      </li>
      <li class="info-item clearfix"
          v-if="plus_price&&plus_price>0">
        <div class="item-l">PLUS会员优惠</div>
        <div class="item-r price">
          <!-- 现金 -->
          <div class="money">￥{{plus_price}}</div>
        </div>
      </li>
      <li class="info-item clearfix"
          v-if="gold_num>0">
        <div class="item-l">金币抵扣</div>
        <div class="item-r price">
          <!-- 金币 -->
          <div class="coin">
            <div class="num">{{gold_num}}</div>
            <img :src="ImgBaseUrl+'/mp_3.1.6/goldcoin/gold.png'"
                 v-if="ImgBaseUrl"
                 alt
                 class="icon" />
          </div>
        </div>
      </li>
      <li class="info-item clearfix"
          v-if="silver_num>0">
        <div class="item-l">银币抵扣</div>
        <div class="item-r price">
          <!-- 银币 -->
          <div class="coin">
            <div class="num">{{silver_num}}</div>
            <img :src="ImgBaseUrl+'/mp_3.1.6/goldcoin/silver.png'"
                 v-if="ImgBaseUrl"
                 alt
                 class="icon" />
          </div>
        </div>
      </li>
      <li class="info-item clearfix"
          v-if="selcet_ticket_data.type_money>0">
        <div class="item-l">优惠券抵扣</div>
        <div class="item-r price">
          <!-- 现金 -->
          <div class="money">￥{{selcet_ticket_data.type_money||0}}</div>
        </div>
      </li>
    </ul>
    <!-- 备注 -->
    <!-- <div class="remark">
      <div class="tip">备注</div>
      <input type="text"
             name
             id
             class="remark-inp"
             placeholder="请输入"
             v-model="user_remark" />
    </div> -->

    <!-- 成年人提示 -->
    <div class="adult">
      <img :src="ImgBaseUrl+'/mp_3.1.6/提示图标/安卓/hdpi/提示.png'"
           v-if="ImgBaseUrl"
           alt
           class="icon" />
      未满18周岁的手术人需要在监护人陪同下到院面诊
    </div>

    <!-- 遮罩 -->
    <div class="mask"
         v-if="gold_exchange||show_check||ticket_mark">
      <div class="ticketBox"
           v-if="ticket_mark">
        <p class="tb-title">
          可用优惠券
          <span class="close"
                @click="closeMask">×</span>
        </p>
        <scroll-view :scroll-y="true"
                     :style="{'height': '474px'}"
                     @scroll="scroll"
                     @scrolltolower="pullrefresh">
          <div class="tb-ticket"
               @tap="checkTicket(item)"
               v-for="(item, index) in ticket_array"
               :key="index">
            <div class="tb-left">
              <!-- 满减券 -->
              <div class="center"
                   v-if="item.source!=3">
                <div class="money">
                  <div class="icon">￥</div>
                  <div class="num">{{item.type_money}}</div>
                </div>
                <div class="tip">满{{item.type_min_money}}可用</div>
              </div>
              <!-- 特殊券 -->
              <div class="center special"
                   v-if="item.source==3">体验券</div>
            </div>
            <div class="tb-right">
              <div class="t-title clearfix">
                <div class="t-type">[{{item.source_name}}]</div>
                <div class="t-name">{{item.type_name}}</div>
              </div>
              <div class="dec">可在{{item.condtion_name}}使用</div>
              <div class="t-timer">{{item.start}}~{{item.end}}</div>
            </div>
            <div class="user-btn">
              <img :src="ImgBaseUrl+'/mp_3.0/mine/coupon_empty@2x.png'"
                   v-if="ImgBaseUrl&&!item.selected"
                   alt
                   class="img" />
              <img :src="ImgBaseUrl+'/mp_3.0/mine/coupon_selected@2x.png'"
                   v-if="ImgBaseUrl&&item.selected"
                   alt
                   class="img" />
            </div>
          </div>
        </scroll-view>
      </div>
      <!-- 金币兑换银币 -->
      <conversion v-if="gold_exchange"
                  @closeMask="closeMask"
                  :count_gold="order_data.use_gold"
                  @show_check_model="show_check_model"></conversion>
      <!-- 金银币抵扣验证 -->
      <check v-if="show_check"
             :model_type="model_type"
             :user_tel="user_tel"
             @model_submit="model_submit"
             @closeMask="closeMask"
             :tip_msg="tip_msg"></check>
    </div>

    <div class="bottom-bar">
      <button class="submit-btn"
              @tap="check_form()">立即购买</button>
      <div class="total_bottom">
        合计:
        <span class="money_icon">￥</span>
        <span class="money">{{fixes_price}}</span>
      </div>
    </div>
    <!-- <div class="divbottom">
      <div class="total">
        合计：
        <span class="num1">¥</span>
        <span class="num">{{totalCost}}</span>
      </div>
      <div class="rightbox">
        <button class="btn"
                @click="submitBooking"
                :disabled="isDisabled"
                v-text="project_type==1?'提交订单':'立即预约'"></button>
      </div>
    </div>-->
  </div>
</template>
<script>
import doctorList from "@/components/doctorList/doctorList";
import common from "@/assets/js/mmk_common.js";
import pay from "@/assets/js/pay1.js";
import imageurl from "@/assets/js/image.js";
import conversion from "@/components/coins/conversion";
import check from "@/components/coins/check";
imageurl;
export default {
  data () {
    return {
      imgUrl: common.image_response,
      ImgBaseUrl: common.image_resource,
      date: "请选择预约时间",
      style: true,
      ishow: false,
      mall: [],
      ticket_array: [],
      //   保存原始优惠券
      ticket_list: [],
      ticket_id: 0, //优惠券id,
      ticket_data: {},
      telNum: "",
      totalCost: 0,
      order_sn: "",
      mallID: "",
      start: "",
      currentdate: "",
      isDisabled: false,
      referee_realname: "",
      discount: "", //优惠券满减金额
      ticket_name: "",
      isPhone: true,
      wetchartNum: "", //微信号
      ticket_mark: false, //优惠券弹窗标识
      collected: true, //优惠券是否领取
      appointment_price: 0,
      end_time: "",
      type: "", //项目提交的类型
      type_name: "",
      kou_credit: 0, //积分抵扣
      deduction_credit: 0,
      user_credit: 0, //用户的可用积分（计算）
      all_price: 0,
      doctorList: "",
      activity_status: "",
      showPrice: "", //总价，展示不计算
      real_kou: 0,
      user_credit_mask: "", //弹窗显示
      text_mask: "",
      project_type: "",
      // 订单信息
      order_data: {},
      // 金银币兑换弹窗
      gold_exchange: false,
      // 校验金银币抵扣
      show_check: false,
      // 金币
      gold_num: 0,
      // 银币
      silver_num: 0,
      // 选择的优惠券
      selcet_ticket_data: {},
      // 验证码的类型 1表示兑换校验
      model_type: 1,
      // 提示语
      tip_msg: "",
      // 验证码
      check_code: "",
      exchange_gold: 0,
      fixes_price: 0,
      // 总金额
      all_priceL: "",
      // 计算后的支付金额
      user_remark: "",
      plus_price: 0,
      user_tel: ""
    };
  },
  onLoad (options) {
    Object.assign(this.$data, this.$options.data());
    wx.setNavigationBarTitle({ title: '确认订单' });
    this.style = true;
    //项目详情传过来的商品id
    this.mallID = options.str || 0;
    if (!wx.getStorageSync("user_data").referee_phone) {
      this.isPhone = false; //没有服务商号码
    } else {
      this.isPhone = true;
      this.telNum = wx.getStorageSync("user_data").referee_phone;
    }
  },
  onShow () {
    wx.setNavigationBarTitle({ title: '确认订单' });
    if (!wx.getStorageSync("user_data").referee_phone) {
      this.isPhone = false; //没有服务商号码
      this.telNum = "";
    } else {
      this.isPhone = true;
      this.telNum = wx.getStorageSync("user_data").referee_phone;
    }
    if (wx.getStorageSync("user_data")) {
      let user_data = wx.getStorageSync("user_data")
      let tel = user_data.username
      this.user_tel = tel.substr(tel.length - 4)
    }

    this.getData();
  },
  components: {
    doctorList,
    conversion,
    check
  },
  watch: {
    // 金币
    gold_num (newVal, oldVal) {
      if (newVal <= 0 || (newVal + "").startsWith("0")) {
        this.gold_num = "";
      } else {
        // 判断账户的金币是否大于可抵扣金币
        if (this.order_data.use_gold > this.order_data.deduction_credit) {
          // 账户金币大于可抵扣金币  最大值=可抵扣金币
          this.gold_num =
            newVal > this.order_data.deduction_credit
              ? this.order_data.deduction_credit
              : newVal;
        } else {
          this.gold_num =
            newVal > this.order_data.use_gold
              ? this.order_data.use_gold
              : newVal;
        }
      }

      this.reset_ticket();
      this.calculate_plus();
      this.$forceUpdate();
    },
    // 银币
    silver_num (newVal, oldVal) {
      if (newVal <= 0 || (newVal + "").startsWith("0")) {
        this.silver_num = "";
      } else {
        // 判断账户的银币是否大于可抵扣银币
        if (this.order_data.use_sliver > this.order_data.deduction_credit) {
          console.log(newVal);
          // 账户银币大于可抵扣银币  最大值=可抵扣银币
          this.silver_num =
            newVal - 0 > this.order_data.deduction_credit
              ? this.order_data.deduction_credit
              : newVal;
        } else {
          this.silver_num =
            newVal - 0 > this.order_data.use_sliver
              ? this.order_data.use_sliver
              : newVal;
        }
      }

      this.reset_ticket();
      this.calculate_plus();
      this.$forceUpdate();
    },
    selcet_ticket_data (newVal, oldVal) {
      this.addtion_price();
    }
  },
  methods: {
    //获取订单信息
    getData () {
      let that = this;
      //预约项目
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_5/project/affirm",
        {
          id: this.mallID,
          user_id: wx.getStorageSync("user_id")
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.status_code == 0) {
            this.order_data = res.data;
            // 处理优惠券
            if (res.data.ticket) {
              // this.isTicket = true;
              this.ticket_list = res.data.ticket;
              this.ticket_list.forEach(element => {
                element.end = new Date(element.send_end_time * 1000).Format(
                  "yyyy.MM.dd"
                );
                element.start = new Date(element.send_start_time * 1000).Format(
                  "yyyy.MM.dd"
                );
                element.is_use = 1;
              });
              this.ticket_array = [...this.ticket_list];
            }
            // 初始化总价
            this.all_price = this.order_data.project_price;
            this.fixes_price = this.all_price;
            // 初始化金银币

            if (this.order_data.deduction_method == 1) {
              this.gold_num =
                this.order_data.use_gold >= this.order_data.deduction_credit
                  ? this.order_data.deduction_credit
                  : this.order_data.use_gold;
            }

            if (this.order_data.deduction_method == 2) {
              this.silver_num =
                this.order_data.use_sliver >= this.order_data.deduction_credit
                  ? this.order_data.deduction_credit
                  : this.order_data.use_sliver;
            }
          } else {
            common.mmk_Loading(2, res.message);
            return false;
          }
        }
      );
    },
    getInfoData () {
      common.mmk_Loading(0);
      setTimeout(() => {
        common.fly_post("api/v4_5/my_info_detail", "", result => {
          let res = result.data;
          common.mmk_Loading(1);
          if (res.status_code == 0) {
            this.telNum = res.data.referee_phone;
            wx.setStorageSync("user_data", res.data);
          } else {
            common.mmk_Loading(2, res.message);
          }
        });
      }, 200);
    },
    // 点击优惠券
    toTicketDetail () {
      this.ticket_mark = true;
    },
    // 关闭优惠券
    closeMask () {
      this.ticket_mark = false;
      this.gold_exchange = false;
      this.show_check = false;
    },
    // 使用优惠券
    checkTicket (item) {
      if (item.selected) {
        item.selected = false;
        this.selcet_ticket_data = {};
        return;
      }
      this.ticket_array.forEach(val => {
        val.selected = false;
      });
      item.selected = true;
      this.selcet_ticket_data = item;
    },
    doctorDetail () {
      this.$refs.mychild.toDetail();
    },
    clearEmoji () {
      // 禁止输入表情
      this.wetchartNum = this.wetchartNum.replace(
        /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g,
        ""
      );
      //禁止输入中文
      this.wetchartNum = this.wetchartNum.replace(
        /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g,
        ""
      );
    },
    //优惠券列表动态更新
    reset_ticket () {
      // 计算可用优惠券的价格
      // 可使用优惠券的价格 = 总价 -（金币 + 银币 + plus会员）
      let useable_price =
        (this.all_price * 100 -
          this.gold_num * 100 -
          this.silver_num * 100 -
          this.plus_price * 100) /
        100;
 

      // 如果选中的优惠券可用金额<useable_price  清空已选择的优惠券
      if (this.selcet_ticket_data.type_min_money > useable_price) {
        this.selcet_ticket_data = {};
      }

      // 更新优惠券列表
      this.ticket_array = this.ticket_list.filter(
        item => item.type_min_money <= useable_price
      );
    },
    // 加减金银币
    action_coin (type, action) {
      // type  1:金币  2:银币
      // action  +:加  -：减
      switch (type) {
        case 1:
          action == "+" ? this.gold_num++ : this.gold_num--;
          break;
        case 2:
          action == "+" ? this.silver_num++ : this.silver_num--;
          break;
        default:
          break;
      }
      this.$forceUpdate();
    },
    // 开启金银币兑换弹窗
    show_coinmodel () {
      this.gold_exchange = true;
    },
    // 开启验证码弹框
    show_check_model (type = 2, gold_num) {
      this.show_check = true;
      this.exchange_gold = gold_num - 0;
      this.model_type = type;
    },
    // 金银币模态框提交
    model_submit (type, check_code) {
      this.check_code = check_code;
      switch (type) {
        case 1:
          // 兑换金银币
          this.exchange_coin();
          break;
        case 2:
          // 提交订单
          this.order_submit();
          break;

        default:
          break;
      }
    },
    // 金币兑换银币
    exchange_coin () {
      let that = this;
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post(
        "api/v4_5/user_wallet/exchange",
        { gold_coin: this.exchange_gold },
        result => {
          let res = result.data;
          if (res.status_code == "0") {
            wx.showToast({
              title: "兑换成功", //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => {
                setTimeout(() => {
                  that.getData();
                  that.closeMask();
                }, 1000);
              }
            });
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
      );
    },
    // 计算plus优惠价格
    calculate_plus () {
      let count_before =
        (this.all_price * 100 - this.gold_num * 100 - this.silver_num * 100) /
        100;
      this.plus_price = (
        count_before *
        100 *
        (this.order_data.plus_ratio * 100) /
        10000
      ).toFixed(2);
      this.addtion_price();
    },
    //价格合计
    addtion_price () {
      let final_price = (
        (this.all_price * 100 -
          this.gold_num * 100 -
          this.silver_num * 100 -
          this.plus_price * 100 -
          (this.selcet_ticket_data.type_money
            ? this.selcet_ticket_data.type_money * 100
            : 0)) /
        100
      ).toFixed(2);
      console.log(
        this.all_price,
        this.gold_num,
        this.silver_num,
        this.plus_price,
        this.selcet_ticket_data.type_money
      );

      // 判断价格是否小于等于0  小鱼等于0  就只展示运费
      this.fixes_price = final_price > 0 ? final_price : 0;
    },
    // 校验表单
    check_form () {
      let that = this;
      if (this.gold_num > 0 || this.silver_num > 0) {
        this.show_check_model(2);
      } else {
        this.order_submit();
      }
    },
    //提交订单
    order_submit () {
      common.mmk_Loading(0);
      common.fly_post(
        "/api/v4_5/project/order",
        {
          project_id: this.order_data.id,
          service_phone: this.telNum || "",
          hospital_id: this.order_data.hospital_id,
          wechat: this.wetchartNum,
          ticket_id: this.selcet_ticket_data.id || "",
          remark: this.user_remark,
          code: this.check_code,
          use_currency: this.gold_num || this.silver_num
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.status_code == 0) {
            this.order_sn = res.data.order_sn;
            if (this.fixes_price <= 0) {
              //支付金额为0
              if (
                this.order_data.activity_status == 2 ||
                this.order_data.activity_status == 4
              ) {
                //全款项目和抢购项目
                wx.redirectTo({
                  url: "/pages/package_mine/project_order_list/main"
                });
              } else {
                //普通项目支付
                wx.redirectTo({
                  url: "/pages/package_projects/booking_success/main"
                });
              }
            } else {
              // 结算金额大于0
              if (
                this.order_data.activity_status == 2 ||
                this.order_data.activity_status == 4
              ) {
                //全款项目和抢购项目支付
                pay(
                  res.data.body_title,
                  res.data.order_sn,
                  res.data.order_price,
                  "project_full_order"
                );
              } else {
                //普通项目支付
                pay(
                  res.data.body_title,
                  res.data.order_sn,
                  res.data.order_price,
                  "project"
                );
              }
            }
          } else if (res.status_code == 2188) {
            wx.showModal({
              title: "提示",
              content: "活动已结束，请重新进行预约",
              showCancel: false,
              confirmText: "确定",
              confirmColor: "#FF383E",
              success: function (res) {
                if (res.confirm) {
                  wx.redirectTo({
                    url:
                      "/pages/package_projects/project_detail/main?id=" +
                      this.mallID
                  });
                }
              }
            });
          } else if (res.status_code == 2191) {
            wx.showModal({
              title: "",
              content: "项目正在抢购，请重新进行预约",
              showCancel: false,
              confirmText: "确定",
              confirmColor: "#FF383E",
              success: function (res) {
                if (res.confirm) {
                  wx.redirectTo({
                    url:
                      "/pages/package_projects/project_detail/main?id=" +
                      this.mallID
                  });
                }
              }
            });
          } else if (res.status_code == 2214) {
            wx.showModal({
              title: "",
              content: res.message,
              showCancel: false,
              confirmText: "我知道了",
              confirmColor: "#FF383E",
              success: function (res) {
                if (res.confirm) {
                  // wx.redirectTo({ url: '/pages/project_detail/main?id=' + this.mallID });
                }
              }
            });
          } else if (res.status_code == 1027) {
            //未进行一级认证
            common.mmk_Loading(2, res.message);
            // wx.navigateTo({ url: "/pages/identification/main?status=1" });
          } else {
            common.mmk_Loading(2, res.message);
            return false;
          }
        }
      );
    }
  }
};
</script>
<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(243, 244, 246, 1);
  position: relative;
  .project-detail {
    margin: 10px;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 12px;
    display: flex;
    .project-logo {
      width: 114px;
      height: 114px;
      background: rgba(230, 230, 230, 1);
      border-radius: 5px;
      overflow: hidden;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .project-info {
      flex: 1;
      margin-left: 10px;
      position: relative;
      .project-name {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 21px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .hos-name {
        font-size: 12px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 16px;
        margin-top: 4px;
      }
      .project-price {
        position: absolute;
        bottom: 0px;
        left: 0px;
        .rmb {
          display: inline-block;
          vertical-align: middle;
          .icon {
            font-size: 12px;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            color: rgba(255, 56, 62, 1);
            line-height: 16px;
            display: inline-block;
            vertical-align: bottom;
          }
          .num {
            font-size: 18px;
            font-family: "PingFangSC-Medium", "PingFang SC";
            font-weight: 500;
            color: rgba(255, 56, 62, 1);
            line-height: 20px;
            display: inline-block;
            vertical-align: bottom;
          }
        }
        .coin {
          display: inline-block;
          vertical-align: middle;
          margin-left: 8px;
          .coin-item {
            .icon {
              width: 12px;
              height: 12px;
              margin-right: 1px;
              display: inline-block;
              vertical-align: middle;
            }
            .tip {
              font-size: 10px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              line-height: 14px;
              display: inline-block;
              vertical-align: middle;
            }
            &.gold {
              .tip {
                color: rgba(245, 208, 64, 1);
              }
            }
            &.silver {
              .tip {
                color: rgba(165, 179, 185, 1);
              }
            }
          }
        }
      }
    }
  }
  // plus
  .plus {
    margin: 0px 10px;
    height: 29px;
    background: rgba(255, 241, 216, 1);
    border-radius: 5px;
    font-size: 12px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: rgba(87, 66, 66, 1);
    line-height: 29px;
    text-align: center;
  }
  // 微信号  推荐人
  .user-info {
    margin: 10px;
    background-color: #fff;
    border-radius: 5px;
    padding: 17px 10px;
    .info-item {
      display: flex;
      .tip {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-right: 24px;
      }
      .inp {
        flex: 1;
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        ::placeholder {
          font-size: 14px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }
      }
      &:last-of-type {
        margin-top: 22px;
      }
    }
  }
  // 金银币和优惠券抵扣
  .deduction {
    margin: 10px;
    padding: 0px 10px;
    background-color: #fff;
    border-radius: 5px;
    .coins-bar {
      padding: 12px 0px;
      .coin-item {
        margin-top: 20px;
        .top {
          .title {
            float: left;
            font-size: 14px;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            color: rgba(29, 29, 29, 1);
            line-height: 20px;
          }
          .controller {
            float: right;
            .add-btn,
            .minus-btn {
              margin: 0px;
              padding: 0;
              width: 16px;
              height: 16px;
              border-radius: 4px;
              background: none;
              border: none;
              outline: none;
              display: inline-block;
              vertical-align: middle;
              :disabled {
                opacity: 0.6;
              }
            }
            .add-btn {
              background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.1.6/%E8%B4%AD%E7%89%A9%E8%BD%A6%E2%80%9C%2B%E2%80%9D%E2%80%98-%E2%80%99%E5%9B%BE%E6%A0%87/%E6%B7%B1%E8%89%B2/%E5%AE%89%E5%8D%93/xxxhdpi/%E7%BC%96%E7%BB%84%2015.png);
              background-repeat: no-repeat;
              background-size: cover;
            }
            .minus-btn {
              background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.1.6/%E8%B4%AD%E7%89%A9%E8%BD%A6%E2%80%9C%2B%E2%80%9D%E2%80%98-%E2%80%99%E5%9B%BE%E6%A0%87/%E6%B7%B1%E8%89%B2/%E5%AE%89%E5%8D%93/xxxhdpi/%E7%BC%96%E7%BB%84%2015%E5%A4%87%E4%BB%BD.png);
              background-repeat: no-repeat;
              background-size: cover;
            }
            .num-inp {
              width: 40px;
              height: 20px;
              font-size: 14px;
              font-family: "PingFangSC-Medium", "PingFang SC";
              font-weight: 500;
              color: rgba(51, 51, 51, 1);
              line-height: 20px;
              display: inline-block;
              vertical-align: middle;
              text-align: center;
            }
            &.exchange {
              font-size: 14px;
              font-family: "PingFangSC-Regular", "PingFang SC";
              font-weight: 400;
              color: rgba(255, 115, 164, 1);
              line-height: 20px;
            }
          }
        }
        .tips {
          font-size: 12px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 16px;
          margin-top: 6px;
        }
        &:first-of-type {
          margin-top: 0;
        }
      }
    }
    .ticket-bar {
      border-top: 1px solid rgba(242, 242, 242, 1);
      height: 44px;
      .ticket-l {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(29, 29, 29, 1);
        line-height: 44px;
        float: left;
      }
      .ticket-r {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        line-height: 44px;
        float: right;
        display: inline-block;
        vertical-align: middle;
        // 没有优惠券
        .ticket-empty {
          color: rgba(153, 153, 153, 1);
          line-height: 44px;
        }
        .ticket {
          color: rgba(29, 29, 29, 1);
          line-height: 44px;
        }
        .icon {
          width: 6px;
          height: 10px;
          display: inline-block;
          margin-left: 8px;
        }
      }
    }
  }
  // 订单信息
  .order-info {
    margin: 10px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    padding: 0 10px 11px 10px;
    .info-item {
      margin-top: 12px;
      vertical-align: middle;
      .item-l {
        float: left;
        font-size: 12px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 21px;
      }
      .item-r {
        float: right;
        &.price {
          .money {
            display: inline-block;
            vertical-align: middle;

            font-size: 14px;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            display: inline-block;
            vertical-align: middle;
          }
          .icon-and {
            color: rgba(202, 202, 202, 1);
            font-size: 10px;
            margin: 0px 2px;
            display: inline-block;
            vertical-align: middle;
          }
          .coin {
            display: inline-block;
            vertical-align: middle;
            .icon {
              width: 12px;
              height: 12px;
              display: inline-block;
              vertical-align: middle;
              margin-left: 2px;
            }
            .num {
              font-size: 14px;
              font-family: "PingFangSC-Regular", "PingFang SC";
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              display: inline-block;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
  // 备注
  .remark {
    margin: 0 10px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    display: flex;
    padding: 0px 10px;
    .tip {
      font-size: 12px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 40px;
      padding-right: 16px;
    }
    .remark-inp {
      flex: 1;
      height: 40px;
      font-size: 12px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 40px;
      ::placeholder {
        font-size: 12px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 40px;
      }
    }
  }
  .adult {
    margin-top: 26px;
    font-size: 12px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: rgba(245, 157, 97, 1);
    line-height: 12px;
    text-align: center;
    margin-bottom: 60px;
    .icon {
      width: 12px;
      height: 12px;
      display: inline-block;
      vertical-align: bottom;
    }
  }
  // 遮罩
  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.47);
    z-index: 999;
    .ticketBox {
      width: 100%;
      height: auto;
      box-sizing: border-box;
      background-color: #fff;
      position: absolute;
      bottom: 0px;
      left: 0;
      border-radius: 5px;
      padding: 0 8px 10px 10px;
      .tb-title {
        height: 44px;
        font-weight: 600;
        font-size: 14px;
        color: #333;
        line-height: 44px;
        text-align: center;
        position: relative;
        margin: 0 5px 10px;
        &::before {
          content: "";
          width: 98%;
          height: 0.5px;
          background-color: #e0e0e0;
          position: absolute;
          bottom: 0.5%;
          left: 0.5%;
        }
        .close {
          width: 40px;
          height: 44px;
          font-size: 30px;
          color: #666;
          position: absolute;
          right: 0;
        }
      }
      .tb-ticket {
        display: flex;
        height: 92px;
        margin: 10px 0;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0px 2px 8px 0px rgba(164, 178, 193, 0.45);
        overflow: hidden;
        position: relative;
        .tb-left {
          width: 98px;
          height: 100%;
          border-right: 1px dashed rgba(235, 235, 235, 1);
          position: relative;
          .center {
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .money {
              text-align: center;
              .icon {
                font-size: 12px;
                font-family: "STHeitiTC-Medium", "STHeitiTC";
                font-weight: 500;
                color: rgba(220, 47, 107, 1);
                display: inline-block;
                vertical-align: bottom;
              }
              .num {
                font-size: 26px;
                font-family: "STHeitiTC-Medium", "STHeitiTC";
                font-weight: 500;
                color: rgba(220, 47, 107, 1);
                line-height: 24px;
                display: inline-block;
                vertical-align: bottom;
              }
            }
            .tip {
              font-size: 12px;
              font-family: "PingFangSC-Regular", "PingFang SC";
              font-weight: 400;
              color: rgba(235, 118, 158, 1);
              line-height: 17px;
              text-align: center;
              margin-top: 6px;
            }
            &.special {
              font-size: 18px;
              font-family: "PingFangSC-Semibold", "PingFang SC";
              font-weight: 600;
              color: rgba(220, 47, 107, 1);
              line-height: 24px;
              text-align: center;
            }
          }

          &::before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: block;
            background-color: #fff;
            box-shadow: 0px 2px 8px 0px inset rgba(164, 178, 193, 0.45);
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(50%, -50%);
          }
          &::after {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: block;
            background-color: #fff;
            box-shadow: 0px 2px 8px 0px inset rgba(164, 178, 193, 0.45);
            position: absolute;
            bottom: 0;
            right: 0;
            transform: translate(50%, 50%);
          }
        }
        .tb-right {
          flex: 1;
          padding: 10px;
          box-sizing: border-box;
          position: relative;
          .t-title {
            font-size: 16px;
            font-family: "PingFangSC-Medium", "PingFang SC";
            font-weight: 500;
            line-height: 20px;
            display: flex;
            .t-type {
              color: rgba(254, 120, 158, 1);
              vertical-align: middle;
              display: inline-block;
            }
            .t-name {
              color: rgba(29, 32, 35, 1);
              vertical-align: middle;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              flex: 1;
            }
          }
          .dec {
            font-size: 12px;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            color: rgba(63, 69, 75, 1);
            line-height: 16px;
            margin-top: 5px;
          }
          .t-timer {
            font-size: 12px;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            color: rgba(96, 105, 114, 1);
            line-height: 16px;
            position: absolute;
            left: 10px;
            bottom: 10px;
          }
        }
        .user-btn {
          width: 24px;
          height: 24px;
          position: absolute;
          bottom: 5px;
          right: 7px;
          .img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  // 底部栏
  .bottom-bar {
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -2px 5px 0px rgba(229, 229, 229, 0.48);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    .total_bottom {
      font-size: 14px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 20px;
      display: inline-block;
      vertical-align: baseline;
      float: right;
      line-height: 48px;
      .money_icon {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(255, 56, 62, 1);
        line-height: 16px;
        display: inline-block;
        vertical-align: baseline;
      }
      .money {
        font-size: 20px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(255, 56, 62, 1);
        line-height: 20px;
        display: inline-block;
        vertical-align: baseline;
      }
    }
    .submit-btn {
      width: 106px;
      height: 38px;
      background: linear-gradient(
        226deg,
        rgba(254, 120, 161, 1) 0%,
        rgba(254, 123, 136, 1) 100%
      );
      border-radius: 25px;
      font-size: 14px;
      font-family: "PingFangSC-Medium", "PingFang SC";
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 38px;
      text-align: center;
      display: inline-block;
      vertical-align: middle;
      float: right;
      margin: 5px 5px 0 16px;
    }
  }
}
</style>


